<script>
import Zoetrope from "../../components/zoetrope/zoetrope.vue";
import cardCarouseActivityl from "../../components/cardCarouseActivityl/cardCarouseActivityl.vue";
import globalUtils from "../../res/www.a9a.cn";
import CardCarouseGuest from "../../components/cardCarouseGuest/cardCarouseGuest.vue";

var app = getApp();
var t = require('../../@babel/runtime/helpers/defineProperty');
var o = true;

export default {
  name: "index4",
  components: {CardCarouseGuest, cardCarouseActivityl, Zoetrope},
  data() {
    return {
      aid: '',
      color: '',
      rgbcolor: '',
      banner: [],
      timed: {},
      recommended_guests: {},
      emotional_issues: {},
      college: {},
      blind_steps: {},
      share: [],
      new_icon: {},
      uList: [],
      report_analysis: {},
      remainingTime: 0, // 剩余总秒数
      timer: null, // 计时器
      djs_D: '',
      djs_H: '',
      djs_M: '',
      djs_S: '',
      is_share_qr_code: false,
      on_qr_code: {
        img: '',
        text: '',
      },
      iflogin: false,
      blind_event: {},
      waterfallList: [],
      banner_W: '',
      banner_H: '',
      rq: 0, // 榜单ID

    }
  },
  onLoad(a) {
    const that = this;
    this.onLoadClone3389(a);

    app.globalData.get_openid().then(function (a) {
      that.init();
      that.newInit();
    });

  },
  computed: {},
  methods: {
    atop() {
      uni.navigateTo({
        url: '/pagesA/registrationInformation/registrationInformation'
      })
    },
    filteredItems(arrLst) {
      return arrLst.filter(item => item.img && item.img.trim() !== '');

    },
    onLoadClone3389: function (a) {
      var that = this;
      if (globalUtils.empty(app.globalData.aid)) {
        var i = globalUtils.set_options_aid(that, a);
      }
      app.globalData.get_config('_ZEAI').then(function (a) {
        that.setData({
          aid: i,
          color: app.globalData._ZEAI.color,
          rgbcolor: globalUtils.c16_rgb(app.globalData._ZEAI.color),
          nikbg: app.globalData.WWW + '/res/m/img/nikbg.png'
        });
        globalUtils.set_tabbar();
      });
      app.globalData.get_navigationBarTopHeight(that);
      o = true;
      app.globalData.chklogin().then(function (a) {
        that.iflogin = a;
      });
    },
    // 获取旧首页数据
    init: function () {
      const that = this;
      const a = uni.getStorageSync('COOK_U')
      var o = {
        submitok: 'index',
        openid: a.openid,
        unionid: a.unionid,
        aid: app.globalData.aid,
        rq: that.rq,
      };
      uni.showLoading({
        title: '玩命加载中',
        mask: true
      });
      app.globalData.ajax({
        url: 'index4.php',
        data: o,
        success: function (e) {
          uni.hideLoading();
          // if (e.cook_flag != a.flag && !that.singlePage) {
          //   a.flag = e.cook_flag;
          //   uni.setStorageSync('COOK_U', a);
          //   return void that.onLoadClone3389({});about
          // }
          if (1 == e.flag) {

            if (o.length > 0) {
              globalUtils.o('#img0', function (a) {
                if (a) return
                that.setData({
                  banner_W: a[0].width,
                  banner_H: 0.288 * a[0].width
                });
              });
            }
            var r = globalUtils.get_tabbar_index('my_msg');
            e.btmnewnum > 0
                ? uni.setTabBarBadge({
                  index: r,
                  text: e.btmnewnum
                })
                : uni.removeTabBarBadge({
                  index: r
                });
          } else {
            uni.showToast({
              title: e.msg,
              icon: 'none',
              mask: true
            });
          }
        }
      });
    },
    newInit() {
      const that = this;
      const a = uni.getStorageSync('COOK_U')
      var o = {
        submitok: 'new_index',
        openid: a.openid,
        unionid: a.unionid,
        aid: app.globalData.aid,
        rq: that.rq,
      };
      uni.showLoading({
        title: '玩命加载中',
        mask: true
      });
      app.globalData.ajax({
        url: 'index4.php',
        data: o,
        success: function (e) {
          uni.hideLoading();
          if ('1' === e.flag) {
            that.setData({
                  banner: e.banner,
                  timed: e.timed,
                  blind_event: e.blind_event,
                  blind_steps: e.blind_steps,
                  waterfallList: e.uList,
                  recommended_guests: e.recommended_guests,
                  emotional_issues: e.emotional_issues,
                  college: e.college,
                  share: e.share,
                  new_icon: e.new_icon,
                  report_analysis: e.report_analysis,
                }
            );
            uni.setStorageSync('new_icon', e.new_icon);
            if (that.timed.timed_switch === '1') {
              that.initCountdown()
            }
          } else {
            uni.showToast({
              title: e.msg,
              icon: 'none',
              mask: true
            });
          }
        }
      });
    },
    // 初始化倒计时
    initCountdown() {
      this.clearTimer()
      this.calculateRemaining()
      if (this.remainingTime > 0) {
        this.timer = setInterval(() => {
          this.updateTime()
        }, 1000)
      }
    },
    // 更新时间显示
    updateTime() {
      if (this.remainingTime > 0) {
        this.remainingTime--
        this.updateDisplayTime()
      } else {
        this.clearTimer()
        this.$emit('countdownEnd') // 触发倒计时结束事件
      }
    },
    // 计算剩余时间
    calculateRemaining() {
      const now = Math.floor(Date.now() / 1000);
      this.remainingTime = Math.max(0, Math.floor((this.timed.timed_time - now)))
      this.updateDisplayTime()
    },
    // 更新显示时间
    updateDisplayTime() {
      const days = Math.floor(this.remainingTime / 86400)
      const hours = Math.floor((this.remainingTime % 86400) / 3600)
      const minutes = Math.floor((this.remainingTime % 3600) / 60)
      const seconds = this.remainingTime % 60

      this.djs_D = this.formatTime(days)
      this.djs_H = this.formatTime(hours)
      this.djs_M = this.formatTime(minutes)
      this.djs_S = this.formatTime(seconds)
    },
    // 格式化时间显示（补零）
    formatTime(time) {
      return time < 10 ? `0${time}` : time.toString()
    },
    // 清理计时器
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    onOperation(item) {
      console.log(item);
      if (item.share_url) {
        uni.navigateTo({
          url: `/pagesB/externalUrl/externalUrl?url=${item.share_url}&title=关注公众号`,
        })
      } else {
        this.is_share_qr_code = true
        this.on_qr_code = {
          img: item.share_qr_code,
          text: item.share_name,
        }
      }
    },
    mask_closeFn: function () {
      this.is_share_qr_code = false
    },
    experience() {
      if (this.iflogin) {
        uni.switchTab({
          url: '/pages/user/user',
        })
      } else {
        uni.navigateTo({
          url: '/pages/login/login',
        })
      }

    },
    relationship() {
      if (this.iflogin) {
        uni.switchTab({
          url: '/pages/hn/hn',
        })
      } else {
        uni.navigateTo({
          url: '/pages/login/login',
        })
      }

    },
    getVip(url) {
      if (url === '') return
      if (this.iflogin) {
        uni.navigateTo({
          url: url,
        })
      } else {
        uni.navigateTo({
          url: '/pages/login/login',
        })
      }

    },
  },
}
</script>

<template>
  <view :style=" '--color:' + color + ';--rgbcolor:' + rgbcolor" class="home">
    <view class="homeImg">
      <zoetrope :iflogin="iflogin" :report_analysis="report_analysis" :swiperList="banner"></zoetrope>
    </view>
    <!--限时活动-->
    <view v-if="timed.timed_switch === '1'" class="limitedTimeEvent" @tap="getVip(timed.timed_url)">
      <view class="TimeEvent">
        <view class="timeEventLeft">
          <!--          <text class="alyIcon-shizhong liftIcon"></text>-->
          <!--          <view class="leftImg">限时活动</view>-->
          <image :src="new_icon.index_01" class="index_01" mode="aspectFit"></image>
          <image :src="new_icon.index_02" class="index_02" mode="aspectFit"></image>

        </view>
        <view class="timeEventRight">
          <view class="djs">
            <text class="Tit">距结束</text>
            <block v-if="djs_D > 0">
              <text class="font">{{ djs_D }}</text>
              <text class="span">天</text>
            </block>
            <block v-if="djs_H > 0">
              <text class="font">{{ djs_H }}</text>
              <text class="span">:</text>
            </block>
            <block v-if="djs_M > 0">
              <text class="font">{{ djs_M }}</text>
              <text class="span">:</text>
            </block>
            <block>
              <text class="font">{{ djs_S }}</text>
              <text class="alyIcon-youbian djsIcom"></text>
            </block>
          </view>
        </view>
      </view>
      <view class="eventBox">
        <image :src="timed.timed_img" class="timeImg" mode="aspectFit"></image>
      </view>
    </view>
    <!--相亲活动-->
    <view v-if="blind_event.blind_event_switch === '1'" class="matchmakingEvent">
      <view class="matchmaking">
        <view class="EnTiter">{{ blind_event.blind_event_title }}</view>
        <view class="matchmakingBox">
          <view class="matchmakingLeft">
            {{ blind_event.blind_event_subtitle }}
          </view>
          <view class="matchmakingRight">
            <navigator hoverClass="none" url="/pagesA/party/party">
              更多活动
              <text class="alyIcon-youbian djsIcom"></text>
            </navigator>
          </view>
        </view>
      </view>
      <cardCarouseActivityl :indicatorDots="false" :swiperHeight="150"
                            :userOutLookList="blind_event.list"></cardCarouseActivityl>
    </view>

    <view v-if="blind_steps.blind_steps_switch === '1' " class="DatingSteps">
      <view class="matchmaking">
        <view class="EnTiter">{{ blind_steps.blind_steps_title }}</view>
        <view class="matchmakingBox">
          <view class="matchmakingLeft">
            {{ blind_steps.blind_steps_subtitle }}
          </view>
        </view>
      </view>
      <view class="datingStepsBox">
        <image :src="blind_steps.blind_steps_img" class="datingStepsImg" mode="widthFix"></image>
        <view class="bntBox">
          <button class="bnt" @tap="experience">
            立即体验
            <text class="alyIcon-youbian bntIco"></text>
          </button>
        </view>
      </view>
    </view>
    <view v-if="recommended_guests.recommended_guests_switch === '1'" class="recommendedGuest">
      <view class="matchmaking">
        <view class="EnTiter">{{ recommended_guests.recommended_guests_title }}</view>
        <view class="matchmakingBox">
          <view class="matchmakingLeft">
            {{ recommended_guests.recommended_guests_subtitle }}
          </view>
        </view>
      </view>
      <cardCarouseGuest :swiperHeight="596" :userOutLookList="waterfallList" indicatorActiveColor="#AD51E8">
        indicatorColor="#F2E7F9">
      </cardCarouseGuest>
      <view class="bntBox">
        <button class="bnt" @tap="relationship">
          我要脱单
          <text class="alyIcon-youbian bntIco"></text>
        </button>
      </view>
    </view>

    <view v-if="emotional_issues.emotional_issues_switch === '1'" class="emotionalIssues">
      <view class="matchmaking">
        <view class="EnTiter">{{ emotional_issues.emotional_issues_title }}</view>
        <view class="matchmakingBox">
          <view class="matchmakingLeft">
            {{ emotional_issues.emotional_issues_subtitle }}
          </view>
        </view>
      </view>
      <view class="emotionalBox">
        <image :src="emotional_issues.emotional_issues_img" class="emotionalIssuesImg" mode="widthFix"></image>
      </view>
    </view>

    <view v-if="college.college_switch === '1'" class="windAcademy">
      <view class="matchmaking">
        <view class="EnTiter">{{ college.college_title }}</view>
        <view class="matchmakingBox">
          <view class="matchmakingLeft">
            {{ college.college_subtitle }}
          </view>
        </view>
      </view>
      <view class="windAcademyBox">
        <cardCarouseActivityl :indicatorDots="true"
                              :userOutLookList="filteredItems(college.list)" indicatorActiveColor="#AD51E8"
                              indicatorColor="#F2E7F9"></cardCarouseActivityl>
      </view>
    </view>
    <view class="operationList">
      <view v-for="(item,operationIndex) in share"
            v-if="item.share_qr_code !== '' ||  item.share_url !== ''"
            :key="operationIndex" class="operationItem" @tap="onOperation(item)">
        <image :src="item.share_icon" class="operationImg" mode="aspectFit"></image>
        <view class="text">
          {{ item.share_name }}
          <text class="alyIcon-youbian bntIco"></text>
        </view>
      </view>
    </view>
    <view class="blank"></view>

    <view v-if="is_share_qr_code" class="mask1 alpha0_100 "
          @tap="mask_closeFn">
      <view :style="'--div_box_width:440rpx;--div_box_height:500rpx;--color:' + color + ';--rgbcolor:' + rgbcolor"
            class="div_box div_gps">
        <view class="closebtm ico" @tap.stop.prevent="mask_closeFn">
        </view>
        <view class="popUp">
          <view>
            <image class="popUpImg" mode="widthFix" src="/static/res/img/login.png"></image>
          </view>
          <view class="codrBox">
            <image :showMenuByLongpress="true" :src="on_qr_code.img" class="codrImg" mode="widthFix"></image>
          </view>

          <view class="text">
            扫码关注官方{{ on_qr_code.text }}@有风之恋<br>
            一起了解更多恋爱科普
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "index4.scss";
</style>